<template>
  <div>
    <el-dialog
      @close="handleClose"
      :lock-scroll="false"
      close-on-press-escape
      v-dialogDrag
      title="编辑点位"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
    >
      <el-form
        :model="pointsForm"
        :rules="rules"
        ref="pointsForm"
        label-width="auto"
        class="tabHight_auto"
        size="mini"
      >
        <el-form-item label="点位名称" prop="name">
          <el-input
            v-model="pointsForm.name"
            placeholder="请输入点位名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="Token" prop="token">
          <el-input
            disabled
            v-model="pointsForm.token"
            placeholder="请输入token"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="点位说明" prop="description">
          <el-input
            v-model="pointsForm.description"
            placeholder="请输入点位说明"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="数据类型" prop="type">
          <el-select
            v-model="pointsForm.type"
            placeholder="请输入数据类型"
            class="w100"
          >
            <el-option
              v-for="(item, index) in optionType"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="事件类型" prop="deviceEventType">
          <el-select
            class="w100"
            v-model="pointsForm.deviceEventType"
            placeholder="请输入事件类型"
          >
            <el-option
              v-for="(item, index) in event"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="访问权限" prop="permission">
          <el-radio-group v-model="pointsForm.permission">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-radio label="只读"></el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio label="读/写"></el-radio>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="pointsForm.unit" placeholder="请输入单位">
          </el-input>
        </el-form-item>
        <el-form-item label="图表展示" prop="isChart">
          <el-select
            class="w100"
            multiple
            v-model="pointsForm.isChart"
            placeholder="请选择"
          >
            <el-option
              v-for="item in POINT_CHART_TYPES"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showDialog = false">取 消</el-button>
        <el-button
          v-permission="[13, 'button']"
          size="mini"
          :loading="btnLoading"
          type="primary"
          @click="editPoints('pointsForm')"
        >
          确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { TOKEN_RULES } from "@/utils/local";
import { editPointsApi } from "@/api/deviceType";
import { POINT_CHART_TYPES } from "@/utils/local";
export default {
  props: {
    addPointsshow: {
      type: Boolean,
      default: false
    },
    editPointsData: {
      type: Object
    },
    editIndex: {
      type: Number | String
    },
    deviceTypeToken: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      POINT_CHART_TYPES,
      btnLoading: false,
      showDialog: false,
      pointsForm: {
        name: "",
        token: "",
        description: "",
        type: "",
        permission: "",
        deviceEventType: "",
        unit: "",
        isChart: []
      },
      rules: {
        name: [
          { required: true, message: "请输入点位名称", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur"
          }
        ],
        token: TOKEN_RULES,
        // description: [
        //   { required: true, message: "请输入点位说明", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 15,
        //     message: "长度在 1 到 15 个字符",
        //     trigger: "blur"
        //   }
        // ],
        type: [
          { required: true, message: "请选择数据类型", trigger: "change" }
        ],
        deviceEventType: [
          {
            type: "string",
            required: true,
            message: "请选择事件类型",
            trigger: "change"
          }
        ],
        permission: [
          { required: true, message: "请选择访问权限", trigger: "change" }
        ],

        unit: [{ required: true, message: "请输入单位", trigger: "blur" }]
      },
      optionType: [
        { value: "0", label: "TIMESTAMP" },
        { value: "1", label: "INT" },
        { value: "2", label: "BIGINT" },
        { value: "3", label: "FLOAT" },
        { value: "4", label: "DOUBLE" },
        { value: "5", label: "BINARY(20)" },
        { value: "6", label: "SMALLINT" },
        { value: "7", label: "TINYINT" },
        { value: "8", label: "BOOL" },
        { value: "9", label: "NCHAR(20)" }
        // { value: "0", label: "Long" },
        // { value: "1", label: "DWord" },
        // { value: "2", label: "Float" },
        // { value: "3", label: "Double" },
        // { value: "5", label: "String" },
        // { value: "6", label: "BCD" },
        // { value: "7", label: "LBCD" },
        // { value: "8", label: "Date" },
        // { value: "9", label: "Default" },
        // { value: "10", label: "Boolean" },
        // { value: "11", label: "Char" },
        // { value: "12", label: "Byte" },
        // { value: "13", label: "Short" },
        // { value: "14", label: "Word" },
      ],
      event: [
        { value: "Measurement", label: "遥测" },
        { value: "Location", label: "位置" },
        { value: "Alert", label: "告警" },
        { value: "CommandInvocation", label: "命令调用" },
        { value: "CommandResponse", label: "命令响应" },
        { value: "StateChange", label: "设备状态" }
      ],
      oldToken: ""
      // deviceTypeToken: this.$route.query.deviceTypeToken,
    };
  },
  watch: {
    addPointsshow(oldVal, newVal) {
      this.showDialog = this.addPointsshow;
    },
    editPointsData: {
      handler(newVal, oldVal) {
        this.pointsForm = {
          ...JSON.parse(JSON.stringify(newVal)),
          isChart: newVal.isChart ? newVal.isChart.split(",") : []
        };
        this.oldToken = newVal.token;
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    // 关闭
    handleClose() {
      this.$emit("changeShow", "false");
      this.pointsForm = {
        ...this.editPointsData
      };
    },
    // 修改提交
    editPoints(pointsForm) {
      this.$refs[pointsForm].validate(valid => {
        if (valid) {
          let formData = {};
          formData = Object.assign({}, this.pointsForm);
          formData.deviceTypeToken = this.deviceTypeToken;
          const token = this.pointsForm.token;
          const oldToken = this.oldToken;
          this.btnLoading = true;
          editPointsApi(
            {
              ...formData,
              isChart: formData.isChart.join(","),
              token: token
            },
            this.deviceTypeToken,
            oldToken
          )
            .then(res => {
              this.$msg({
                type: "success",
                message: "操作成功!"
              });
              this.$emit("getPointsData");
              this.showDialog = false;
            })
            .finally(f => {
              this.btnLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style></style>
